<template>
    <div>
        <!-- pc -->
        <div class="wrap" v-if="innerWidth > 500">
            <div class="fixed u-flex">
                <img class="hand img" src="@/image/index/back.png" @click="back">
                <img src="@/image/russia/logo2.png" class="logo">
                俄数通
            </div>
            <div class="fixed_hei"></div>
            <div class="info">
                <div class="left">
                    <div class="left_tit">中俄·远东地区商机<br>ДEЛOBAЯ BOЗMОHHОCTЫ ДЛЯ ДAЛЫHEГOBOCTOHA KИTAЯ И POCCИM</div>
                    <img :src="imgUrl + '/book/cover-1.png'" v-if="imgIndex == -1">
                    <div v-if="imgIndex > -1">
                        <img :src="imgUrl + '/book/' + item" v-for="item in arr">
                    </div>
                    <div class="more" v-if="imgIndex != -1">请点击右侧目录 ，查看更多</div>
                </div>
            </div>
            <!-- :class="rightShow ? 'animation' : ''" -->
            <div class="right" v-if="rightShow">
                <div class="rig_tit">目录</div>
                <div class="rig_sma hand" :class="index == imgIndex ? 'rig_sma_css' : ''"
                    v-for="item, index in catalogue" @click="catalogueClick(index)">{{ item }}</div>
            </div>
            <img v-if="rightShow" src="@/image/russia/btnRight.png" @click="rightShow = false" class="rig_btn hand">
            <img v-else src="@/image/russia/btnLeft.png" @click="rightShow = true" class="rig_btn left_btn hand">
        </div>
        <!-- 手机端 -->
        <div v-else class="pho">
            <PhoHead topIndex="det"></PhoHead>
            <div class="cont">
                <div class="left">
                    <div class="left_tit">中俄·远东地区商机<br>ДEЛOBAЯ BOЗMОHHОCTЫ ДЛЯ ДAЛЫHEГOBOCTOHA KИTAЯ И POCCИM</div>
                    <img :src="imgUrl + '/phoBook/cover-1.png'" v-viewer v-if="imgIndex == -1">
                    <div v-if="imgIndex > -1" v-viewer>
                        <img :src="imgUrl + '/phoBook/' + item" v-for="item in arr">
                    </div>
                    <div class="more" v-if="imgIndex != -1">请点击右侧目录 ，查看更多</div>
                </div>
            </div>
            <div class="right" v-if="rightShow">
                <div class="rig_tit">目录</div>
                <div class="rig_sma hand" :class="index == imgIndex ? 'rig_sma_css' : ''"
                    v-for="item, index in catalogue" @click="catalogueClick(index)">{{ item }}</div>
            </div>
            <div class="rigBig1" v-if="rightShow">
                <img src="@/image/russia/btnRight.png" @click="rightShow = false">
            </div>
            <div class="rigBig1 rigBig2" v-else>
                <img src="@/image/russia/btnLeft.png" @click="rightClick()">
            </div>

            <!-- 提示弹窗 -->
            <el-dialog v-model="tipShow" width="100%" :show-close="false" :close-on-click-modal="false">
                <div class="pop">
                    <img src="@/image/russia/book/popImg1.png" class="pop_img1">
                    <img src="@/image/russia/book/popImg2.png" class="pop_img2">
                    <img src="@/image/russia/book/popImg3.png" @click="konwClick()" class="pop_img3">
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { ref, watch, computed, getCurrentInstance } from "vue";

export default {
    data() {
        return {
            imgUrl: '',
            imgIndex: -1,
            rightShow: true,
            catalogue: ['1、俄罗斯远东区域区位示意图总览…02',
                '2、远东有多远?/为什么要开发远东地区?……………………………………04',
                '3、远东是个淘金宝地?远东崛起是真实的!…………………………………06',
                '4、由“向东看”开始“向东走”……10',
                '5、俄罗斯远东地区概况(远东11州/区简介)………………………………… 12 阿穆尔州    犹太自治州   堪察加边疆区   马加丹州    滨海边疆区  萨哈共和国  萨哈林州  布里亚特共和国   哈巴罗夫斯克边疆区      楚克奇自治区后贝加尔边疆区',
                '6、中俄边境口岸群介绍………………68',
                '7、远东地区港口群介绍………………74',
                '8、俄罗斯《2024年远东发展纲要与2035远景目标》………………………76',
                '9、专家解读《中俄远东地区2024合作发展规划》……………………………84',
                '10、《中俄2018-2024年远东地区合作发展规划》……………………………90',
                '11、远东地区农业开发前景……………92',
                '12、中国对远东地区农业投资动力风险、对策………………………………94 ',
                '13、俄罗斯是中国对外农业投资要吸引点……………………………………97',
                '14、在远东地区开展种植业有哪些商机?………………………………………98',
                '15、远东地区旅游产业商机…………·100',
                '16、滨海边疆区大力发展旅游业、疗养业………………………………………103',
                '17、远东地区矿产资源开发现状与潜力…………………………………………106',
                '18、俄罗斯;加大国内金矿开采………109',
                '19、远东地区物流产业商机…………110',
                '20、远东地区中俄双边经贸行业商机…114',
                '21、珲春市在中俄“远东开发”中的大商机……………………………………116',
                '22、从中国去俄远东地区怎么走?…118',
            ],
            imgs: [
                {
                    children: ['1-1.jpg']
                },
                {
                    children: ['2-1.jpg']
                },
                {
                    children: ['3-1.jpg']
                },
                {
                    children: ['4-1.jpg', '4-2.jpg']
                },
                {
                    children: ['5-1.jpg', '5-2.jpg', '5-3.jpg', '5-4.jpg', '5-5.jpg', '5-6.jpg',
                        '5-7.jpg', '5-8.jpg', '5-9.jpg', '5-10.jpg', '5-11.jpg', '5-12.jpg', '5-13.jpg',
                        '5-14.jpg', '5-15.jpg', '5-16.jpg', '5-17.jpg', '5-18.jpg', '5-19.jpg', '5-20.jpg',
                        '5-21.jpg', '5-22.jpg', '5-23.jpg', '5-24.jpg', '5-25.jpg', '5-26.jpg', '5-27.jpg',
                        '5-28.jpg', '5-29.jpg', '5-30.jpg', '5-31.jpg'
                    ]
                },
                {
                    children: ['6-1.jpg', '6-2.jpg', '6-3.jpg']
                },
                {
                    children: ['7-1.jpg', '7-2.jpg']
                },
                {
                    children: ['8-1.jpg']
                },
                {
                    children: ['9-1.jpg']
                },
                {
                    children: ['10-1.jpg']
                },
                {
                    children: ['11-1.jpg']
                },
                {
                    children: ['12-1.jpg']
                },
                {
                    children: ['13-1.jpg']
                },
                {
                    children: ['14-1.jpg']
                },
                {
                    children: ['15-1.jpg', '15-2.jpg']
                },
                {
                    children: ['16-1.jpg']
                },
                {
                    children: ['17-1.jpg']
                },
                {
                    children: ['18-1.jpg']
                },
                {
                    children: ['19-1.jpg']
                },
                {
                    children: ['20-1.jpg', '20-2.jpg']
                },
                {
                    children: ['21-1.jpg', '21-2.jpg', '21-3.jpg']
                },
                {
                    children: ['22-1.jpg', '22-2.jpg']
                },
            ],
            arr: [],
            innerWidth: 0,
            phoImgs: [
                {
                    children: ['1-1(1).jpg', '1-1(2).jpg']
                },
                {
                    children: ['2-1(1).jpg', '2-1(2).jpg']
                },
                {
                    children: ['3-1(1).jpg', '3-1(2).jpg', '3-2(1).jpg', '3-2(2).jpg']
                },
                {
                    children: ['4-1(1).jpg', '4-1(2).jpg', '4-2(1).jpg', '4-2(2).png']
                },
                {
                    children: ['5-1(1).jpg', '5-1(2).jpg', '5-2(1).jpg', '5-2(2).jpg', '5-3(1).jpg', '5-3(2).jpg', '5-4(1).jpg', '5-4(2).jpg', '5-5(1).jpg', '5-5(2).jpg', '5-6(1).jpg', '5-6(2).jpg',
                        '5-7(1).jpg', '5-7(2).jpg', '5-8(1).jpg', '5-8(2).jpg', '5-9(1).jpg', '5-9(2).jpg', '5-10(1).jpg', '5-10(2).jpg', '5-11-1.png', '5-11(2)-1.png', '5-12.png', '5-12(2).png', '5-13.jpg', '5-13 (2).jpg',
                        '5-14.jpg', '5-14 (2).jpg', '5-15.jpg', '5-15 (2).jpg', '5-16.jpg', '5-16 (2).jpg', '5-17.jpg', '5-17 (2).jpg', '5-18.jpg', '5-18 (2).jpg', '5-19.jpg', '5-19 (2).jpg', '5-20.jpg', '5-20 (2).jpg',
                        '5-21.jpg', '5-21 (2).jpg', '5-22.jpg', '5-22 (2).jpg', '5-23.jpg', '5-23 (2).jpg', '5-24.jpg', '5-24 (2).jpg', '5-25.jpg', '5-25 (2).jpg', '5-26.jpg', '5-26 (2).jpg', '5-27.jpg', '5-27 (2).jpg',
                        '5-28.jpg', '5-28 (2).jpg', '5-29.jpg', '5-29 (2).jpg', '5-30.jpg', '5-30 (2).jpg', '5-31.jpg', '5-31 (2).jpg'
                    ]
                },
                {
                    children: ['6-1.jpg', '6-1 (2).jpg', '6-2.jpg', '6-2 (2).jpg', '6-3.jpg', '6-3 (2).jpg']
                },
                {
                    children: ['7-1.png', '7-1(2).png', '7-2.jpg', '7-2 (2).jpg']
                },
                {
                    children: ['8-1.jpg', '8-1 (2).jpg']
                },
                {
                    children: ['9-1.jpg', '9-1 (2).jpg']
                },
                {
                    children: ['10-1.jpg', '10-1 (2).jpg']
                },
                {
                    children: ['11-1.jpg', '11-1 (2).jpg']
                },
                {
                    children: ['12-1.jpg', '12-1 (2).jpg']
                },
                {
                    children: ['13-1.jpg', '13-1 (2).jpg']
                },
                {
                    children: ['14-1.jpg', '14-1 (2).jpg']
                },
                {
                    children: ['15-1.jpg', '15-1 (2).jpg', '15-2.jpg', '15-2 (2).jpg']
                },
                {
                    children: ['16-1.jpg', '16-1 (2).jpg']
                },
                {
                    children: ['17-1.jpg', '17-1 (2).jpg']
                },
                {
                    children: ['18-1.jpg', '18-1 (2).jpg']
                },
                {
                    children: ['19-1.jpg', '19-1 (2).jpg']
                },
                {
                    children: ['20-1.jpg', '20-1 (2).jpg', '20-2.jpg', '20-2 (2).jpg']
                },
                {
                    children: ['21-1.jpg', '21-1 (2).jpg', '21-2.jpg', '21-2 (2).jpg', '21-3.jpg', '21-3 (2).jpg']
                },
                {
                    children: ['22-1.jpg', '22-1 (2).jpg', '22-2.jpg', '22-2 (2).jpg']
                },
            ],
            tipShow: null,
        }
    },
    created() {
        const { appContext } = getCurrentInstance();
        this.imgUrl = appContext.config.globalProperties.$imgUrl;
        this.innerWidth = window.innerWidth
        if (this.innerWidth < 500) {
            this.rightShow = false
        }
        if (!sessionStorage.getItem('bookTip')) {
            this.tipShow = true
        }
    },
    methods: {
        catalogueClick(index) {
            this.imgIndex = index
            this.arr = []
            if (this.innerWidth < 500) {
                // 手机端
                this.arr = this.phoImgs[index].children
                this.rightShow = false
            } else {
                // 电脑端
                this.arr = this.imgs[index].children
            }
        },
        rightClick() {
            this.tipShow = false
            this.rightShow = true
            sessionStorage.setItem('bookTip', false)//存分页条数
        },
        konwClick() {
            this.tipShow = false
            sessionStorage.setItem('bookTip', false)//存分页条数
        },
        back() {
            this.$router.go(-1);
        }
    }
}
</script>
<style lang="less" scoped>
@media screen and (max-width: 2200px) {
    .info {
        width: 1240px !important;
    }
}

@media screen and (max-width: 1920px) {
    .info {

        .left_tit {
            font-size: 16px !important;
            margin: 10px 0 !important;
            line-height: 26px !important;
        }
    }

    .right {
        width: 260px !important;

        .rig_sma {
            font-size: 13px !important;
            line-height: 22px !important;
            margin-bottom: 6px !important;
        }
    }

    .rig_btn {
        right: 260px !important;
    }

    .left_btn {
        right: 0 !important;
    }
}

@media screen and (max-width: 1830px) {
    .right {
        width: 230px !important;
        padding: 14px 10px !important;
    }

    .rig_btn {
        right: 230px !important;
    }

    .left_btn {
        right: 0 !important;
    }
}

@media screen and (max-width: 1780px) {

    .right {
        width: 200px !important;
        padding: 12px 10px !important;
        border-bottom: 15px solid #fff;

        .rig_tit {
            font-size: 22px !important;
            margin-bottom: 12px !important;
        }

        .rig_sma {
            font-size: 12px !important;
            line-height: 20px !important;
            margin-bottom: 6px !important;
            padding: 0 5px !important;
        }
    }

    .rig_btn {
        right: 200px !important;
    }

    .left_btn {
        right: 0 !important;
    }
}

@media screen and (max-width: 1700px) {
    .right {
        width: 180px !important;
        padding: 12px 8px !important;

        .rig_tit {
            font-size: 20px !important;
            margin-bottom: 12px !important;
        }

        .rig_sma {
            font-size: 12px !important;
            line-height: 20px !important;
            margin-bottom: 6px !important;
        }
    }

    .rig_btn {
        right: 180px !important;
        width: 30px !important;
    }

    .left_btn {
        right: 0 !important;
    }
}


@media screen and (max-width: 1650px) {
    .info {
        width: 1100px !important;

        .left_tit {
            font-size: 14px !important;
            margin: 8px 0 !important;
            line-height: 22px !important;
        }
    }
}

@media screen and (max-width: 1520px) {
    .info {
        width: 1000px !important;
    }
}

@media screen and (max-width: 1500px) {

    .fixed {
        font-size: 16px !important;

        .img {
            width: 11px !important;
        }

        .logo {
            width: 40px !important;
            margin: 0 16px !important;
        }
    }
}

@media screen and (max-width: 1440px) {
    .info {
        width: 900px !important;
    }
}

@media screen and (max-width: 1366px) {
    .fixed {
        font-size: 14px !important;

        .img {
            width: 10px !important;
        }

        .logo {
            width: 35px !important;
            margin: 0 14px !important;
        }
    }
}

@media screen and (max-width: 1320px) {
    .info {
        width: 800px !important;

        .left_tit {
            font-size: 12px !important;
            margin: 6px 0 !important;
            line-height: 20px !important;
        }
    }

    .right {
        width: 170px !important;
        padding: 10px 7px !important;
        border-bottom: 15px solid #fff;

        .rig_tit {
            font-size: 18px !important;
            margin-bottom: 10px !important;
        }

        .rig_sma {
            font-size: 11px !important;
            line-height: 18px !important;
            margin-bottom: 5px !important;
            padding: 0 4px !important;
        }
    }

    .rig_btn {
        right: 170px !important;
        width: 26px !important;
    }

    .left_btn {
        right: 0 !important;
    }
}

@media screen and (max-width: 1200px) {
    .info {
        width: 700px !important;
    }

    .left_btn {
        right: 0 !important;
    }
}

@media screen and (max-width: 1090px) {
    .info {
        width: 600px !important;
    }

    .left_btn {
        right: 0 !important;
    }
}

@media screen and (max-width: 1000px) {
    .info {
        width: 500px !important;
    }

    .right {

        .rig_tit {
            font-size: 16px !important;
            margin-bottom: 8px !important;
        }

        .rig_sma {
            font-size: 10px !important;
            line-height: 16px !important;
            margin-bottom: 3px !important;
        }
    }

    .left_btn {
        right: 0 !important;
    }
}

@media screen and (max-width: 900px) {
    .info {

        .left_tit {
            font-size: 10px !important;
            margin: 4px 0 !important;
            line-height: 18px !important;
        }
    }

    .right {
        width: 150px !important;
        padding: 8px 5px !important;
        border-bottom: 10px solid #fff !important;

        .rig_tit {
            font-size: 14px !important;
            margin-bottom: 8px !important;
        }

        .rig_sma {
            font-size: 10px !important;
            line-height: 16px !important;
            margin-bottom: 3px !important;
        }
    }

    .rig_btn {
        right: 150px !important;
        width: 22px !important;
    }

    .left_btn {
        right: 0 !important;
    }
}

@media screen and (max-width: 840px) {

    .info {
        width: 420px !important;
    }

    .right {

        .rig_tit {
            font-size: 13px !important;
            margin-bottom: 6px !important;
        }

        .rig_sma {
            font-size: 9px !important;
            line-height: 14px !important;
            margin-bottom: 2px !important;
        }
    }

    .rig_btn {
        right: 150px !important;
        width: 20px !important;
    }

    .left_btn {
        right: 0 !important;
    }
}

.wrap {
    min-height: 100vh;
    background: #F7F8FA;

    .fixed {
        width: 100%;
        position: fixed;
        font-size: 20px;
        color: #333;
        height: 60px;
        line-height: 60px;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        padding: 0 56px;
        background-color: #fff;
        box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.16);

        .img {
            width: 13px;
            margin-right: 6px;
        }

        .logo {
            width: 45px;
            margin: 0 20px;
        }
    }

    .fixed_hei {
        height: 60px;
        background: orange;
    }

    .info {
        width: 1440px;
        margin: 0 auto;

        /* 隐藏滚动条 */
        .left::-webkit-scrollbar {
            display: none;
            /* 隐藏滚动条 */
        }

        .left {
            width: 100%;
            height: 93vh;
            overflow-y: auto;
            margin-right: 20px;

            .left_tit {
                font-size: 20px;
                margin: 10px 0;
                line-height: 28px;
            }

            .more {
                text-align: center;
                font-size: 14px;
                margin-top: 15px;
            }

            img {
                width: 100%;
            }
        }
    }


    // .right::-webkit-scrollbar {
    //     display: none;
    //     /* 隐藏滚动条 */
    // }

    .right {
        width: 300px;
        overflow-y: auto;
        position: fixed;
        right: 0;
        bottom: 0;
        top: 60px;
        padding: 17px 10px;
        box-sizing: border-box;
        background: #FFF;
        border-bottom: 20px solid #fff;
        box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.16);

        .rig_tit {
            font-size: 24px;
            color: #3B3B3B;
            margin-bottom: 20px;
        }

        .rig_sma {
            font-size: 14px;
            color: #3B3B3B;
            line-height: 24px;
            padding: 0 7px;
            margin-bottom: 8px;
        }

        .rig_sma:hover {
            color: #fff;
            background: rgba(0, 0, 0, 0.4);
        }

        .rig_sma_css {
            color: #fff;
            background: rgba(0, 0, 0, 0.4);
        }
    }

    .rig_btn {
        position: fixed;
        right: 300px;
        top: 47%;
        width: 35px;
        height: auto;
    }

    .left_btn {
        right: 0;
    }
}

// 手机端
.pho {
    min-height: 100vh;
    background: #F7F8FA;

    /* 隐藏滚动条 */
    .left::-webkit-scrollbar {
        display: none;
        /* 隐藏滚动条 */
    }

    .left {
        width: 100%;
        height: 93vh;
        overflow-y: auto;
        margin-right: 20px;

        .left_tit {
            font-size: 12px;
            line-height: 20px;
            padding: 15px;
            color: #333;
        }

        .more {
            text-align: center;
            font-size: 14px;
            margin-top: 15px;
        }

        img {
            width: 100%;
        }
    }

    .pop {
        padding-top: 3px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: absolute;
        top: 0px;
        left: 0;
        right: 0;
        bottom: 0;


        .pop_img1 {
            width: 68px;
        }

        .pop_img2 {
            width: 240px;
            margin: 15px 15px 0 0;
        }

        .pop_img3 {
            width: 108px;
            margin: 20px 15px 0 0;
        }
    }
}

@media screen and (max-width: 500px) {
    .pho {
        .right {
            width: 260px !important;
            overflow-y: auto;
            position: fixed;
            right: 0;
            bottom: 0;
            top: 50px;
            background: #fff;
            padding: 20px 17px !important;
            box-sizing: border-box;
            border-bottom: 20px solid #fff;
            box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.16);

            .rig_tit {
                font-size: 20px !important;
                color: #3B3B3B;
                margin-bottom: 20px !important;
            }

            .rig_sma {
                font-size: 12px !important;
                color: #3B3B3B;
                line-height: 20px !important;
                padding: 0 7px;
                margin-bottom: 8px !important;
            }

            .rig_sma_css {
                color: #fff;
                background: rgba(0, 0, 0, 0.4);
            }
        }

        .rigBig1 {
            width: 35px;
            height: 60px;
            position: fixed;
            right: 260px !important;
            top: 60px;
            z-index: 2010;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 35px !important;
                height: auto;
            }
        }

        .rigBig2 {
            right: 0 !important;
        }
    }
}

// 弹窗样式
::v-deep .el-dialog__body {
    padding: 0 !important;
}

::v-deep .el-dialog {
    margin: 50px auto !important;
}

::v-deep .el-dialog__header {
    padding: 0 !important;
}

// 动画
.animation {
    animation: scaleRight 0.5s forwards;
}

@keyframes scaleRight {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0%);
    }
}
</style>